<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#box{
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			
			box.style.left = box.offsetLeft + "px";
			box.style.top = box.offsetTop +"px";
			box.style.position = "absolute";
		    box.style.margin = 0;
		    
			document.onkeydown = function(e){
				var e = e||window.e;
				console.log(e.keyCode)
				if(e.keyCode==37){//左
					box.style.left = box.offsetLeft-1 + "px";
				}else if(e.keyCode==38){//上
					box.style.top = box.offsetTop-1 + "px";
				}else if(e.keyCode==39){//右
					box.style.left = box.offsetLeft+1 + "px";
				}else if(e.keyCode==40){//下
					box.style.top = box.offsetTop+1 + "px";
				}
			}
		</script>
	</body>
</html>
